<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
       url="get_users.php"
       toolbar="#toolbar" pagination="true"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
    <tr>
        <th field="name" width="50">姓名</th>
        <th field="mobile" width="50">手机号</th>
    </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="changeOrder()">调整次序</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
    <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
        <div style="margin-bottom:10px">
            <input name="id" class="easyui-textbox" label="id:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="name" class="easyui-textbox" required="true" label="姓名:" style="width:100%">
        </div>
        <div style="margin-bottom:10px">
            <input name="mobile" class="easyui-textbox" required="true" label="手机号:" style="width:100%">
        </div>
    </form>
</div>
<div id="changeOrder" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin'">
<!--    <input class="easyui-filebox" style="width:300px">-->
            <form id="ffSearch" method="post" enctype="multipart/form-data">
            <div title="Excel导入操作" style="padding: 5px" data-options="iconCls:'icon-key'">
                <input class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" />
                <br />
                <input class="easyui-filebox" id="file_upload" style="width:300px" />
            </div>
        </form>

</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>
<script type="text/javascript">
    var url;
    var companyGrid = $('#dg').datagrid({
        url : '/getOrderList',
        idField : 'id',
        fit : true,
        fitColumns : true, //列宽自适应false
        border : true, //边框
        nowrap:true,
        rownumbers : true,
        pageSize:20,//初始化显示条数
        pageList: [20,50,100],
        pagination : true,
        singleSelect:false,
        toolbar:"#toolbar",
        frozenColumns : [ [ {
            title : 'id',
            field : 'id',
            width : 40,
            hidden : true
        } ] ],
        columns : [ [ {
            field:'id',checkbox:true
        },{
            field : 'name',
            title : '姓名',
            width : 150
        },{
            field : 'mobile',
            title : '手机号',
            width : 150
        }

        ] ]
    });

    $(function () {
        //添加对话框，上传控件初始化
        $('#file_upload').filebox({
            buttonText: '选择文件',  //按钮文本
            buttonAlign: 'right',   //按钮对齐
            //multiple: true,       //是否多文件方式
            //accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png", //指定文件类型
            onChange: function (e) {
                console.log('123123123')
                UploadFile(this, "file_upload", "AttachGUID", "div_files");//上传处理
            }
        });
    });
    function UploadFile(_obj, file_ctrlname, guid_ctrlname, div_files) {
        var value = $("#" + file_ctrlname).filebox('getValue');
        var files = $("#" + file_ctrlname).next().find('input[type=file]')[0].files;
        //console.log(files);

        //传入this参数，也可以用这个获取文件
        //var files = $(_obj).context.ownerDocument.activeElement.files;
        //console.log(files);

        var guid = $("#" + guid_ctrlname).val();
        if (value && files[0]) {
            //构建一个FormData存储复杂对象
            var formData = new FormData();
            formData.append("folder", '数据导入文件');
            formData.append("guid", guid);
            formData.append('Filedata', files[0]);//默认的文件数据名为“Filedata”

            $.ajax({
                url: '/FileUpload/Upload', //单文件上传
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
                success: function (json) {
                    //转义JSON为对象
                    var data = $.parseJSON(json);

                    //提示用户Excel格式是否正常，如果正常加载数据
                    ShowUpFiles(guid, div_files);

                    $.ajax({
                        url: '/BillDetail_Cust/CheckExcelColumns?guid=' + guid,
                        type: 'get',
                        dataType:'json',
                        success: function (data) {
                            if (data.Success) {
                                InitGrid(); //重新刷新表格数据
                                showTips("文件已上传，数据加载完毕！");
                            }
                            else {
                                showTips("上传的Excel文件检查不通过。请根据页面右上角的Excel模板格式进行数据录入。");
                            }
                        }
                    });
                },
                error: function (xhr, status, error) {
                    $.messager.alert("提示", "操作失败"); //xhr.responseText
                }
            });
        }
    }
    function newUser(){
        $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
        $('#fm').form('clear');
    }
    function changeOrder(){
        $('#changeOrder').dialog('open').dialog('center').dialog('setTitle','Edit User');
    }
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','调整');
            $('#fm').form('load',row);
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: '/addNewPerson',
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');		// close the dialog
                    $('#dg').datagrid('reload');	// reload the user data
                }
            }
        });
    }
    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','确定删除?',function(r){
                if (r){
                    $.post('/deletePerson',{id:row.id},function(result){
                        if (result.code === 0){
                            $('#dg').datagrid('reload');	// reload the user data
                        } else {
                            $.messager.show({	// show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
</script>
</body>
</html>